<template>
    <!-- 关系（关注列表） -->
    <han-status-bar />
    <view class="relationship">
        <relationship-header
            :active-id="activeTab"
            @tab-change="handleTabChange"
        />
        <relationship-content
            :active-tab="activeTab"
            :user-id="userId"
            @follow-change="handleFollowChange"
        />
    </view>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import relationshipHeader from './components/relationshipHeader.vue';
import relationshipContent from './components/relationshipContent.vue';

// 当前激活的标签 (1:互相关注, 2:关注, 3:粉丝)
const activeTab = ref(1);
const userId = ref(''); // 当前查看的用户ID

// 处理标签变化
const handleTabChange = (tabId) => {
    activeTab.value = tabId;
};

// 处理关注状态变化
const handleFollowChange = (user) => {
    console.log('关注状态变化:', user);
    // TODO 调用API更新关注状态
};

// 页面加载时获取参数
onBeforeMount(() => {
    // 获取URL参数
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.options || {};

    // 获取传递的参数
    userId.value = options.userId || ''; // 用户ID
    const type = parseInt(options.type) || 1; // 列表类型

    // 设置当前激活的标签
    activeTab.value = type;
});
</script>

<style lang="scss"></style>
